<template>
    <div>
        <el-steps :active="2" simple>
            <el-step title="学生自评申请"></el-step>
            <el-step title="班级审核"></el-step>
            <el-step title="班内公示"></el-step>
            <el-step title="学院复审"></el-step>
            <el-step title="学校核定"></el-step>
        </el-steps>
        <div style="width: 60%;margin-top: 40px;margin-bottom: 40px;">
            <el-descriptions :title="college" :column=3 :colon=false>
                <el-descriptions-item label="专业：">{{major}}</el-descriptions-item>
                <el-descriptions-item label="审核开始时间：">{{audit_start_time}}</el-descriptions-item>
                <el-descriptions-item label="平均综测分：">{{Avg_com_score}}</el-descriptions-item>
                <el-descriptions-item label="班级：">{{Class_num}}</el-descriptions-item>
                <el-descriptions-item label="审核结束时间：">{{audit_over_time}}</el-descriptions-item>
                <el-descriptions-item label=''></el-descriptions-item>
            </el-descriptions>
            <div class="right">
                <div class="shenhe">已审核人数：{{Audited_Person}}</div>
                <div class="shenhe">待审核人数：{{Be_audited_Person}}</div>
                <div class="shenhe"
                    style="background-color:blue;position: absolute;top: 40px;right: -200px ;color: aliceblue; font-size: 16px;">
                    {{Class_dis_status}}
                </div>
            </div>
        </div>

        <template>
            <div class="form1">
                <el-table :data="tableData.slice((paginations.currentPage-1)*paginations.PageSize,paginations.currentPage*paginations.PageSize)" border v-loading=false style="width: 100%;" :fit=false>
                    <el-table-column prop="index" label="序号" width="50" type="index">
                    </el-table-column>
                    <el-table-column prop="stuNum" label="学号" width="120"
                        :filters="[{text:'2013456',value:'2013456'},{text:'2013455',value:'2013455'},{text:'2013458',value:'2013458'},{text:'2013457',value:'2013457'}]"
                        :filter-method="filterHandler">
                    </el-table-column>
                    <el-table-column prop="name" label="姓名" width="70">
                    </el-table-column>
                    <el-table-column prop="content" label="内容" width="170">
                    </el-table-column>
                    <el-table-column prop="zyScore" label="智育分" width="90" sortable>
                    </el-table-column>
                    <el-table-column prop="dyScore" label="德育分" width="90" sortable>
                    </el-table-column>
                    <el-table-column prop="lyScore" label="劳育分" width="90" sortable>
                    </el-table-column>
                    <el-table-column prop="myScore" label="美育分" width="90" sortable>
                    </el-table-column>
                    <el-table-column prop="zcScore" label="综测分" width="90" sortable>
                    </el-table-column>
                    <el-table-column prop="classRank" label="班级排名" width="105" sortable>
                    </el-table-column>
                    <el-table-column prop="status" label="状态" width="100">
                    </el-table-column>
                    <el-table-column prop="shTime" label="审核时间" width="100">
                    </el-table-column>
                    <el-table-column label="操作" width="100">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" type="text" size="small">取消</el-button>
                            <el-button type="text" size="small" @click="handleClick1(scope.row)">审核</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="block">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="paginations.currentPage" :page-sizes="paginations.pageSizes"
                        :page-size="paginations.PageSize" layout="total, sizes, prev, pager, next, jumper"
                        :total="tableData.length">
                    </el-pagination>
                </div>
            </div>
        </template>
    </div>

</template>

<script>
export default {
    name: 'Class_dis',
    data() {
        return {
            college: window.sessionStorage.getItem("college"),
            Class_num: window.sessionStorage.getItem("classNum"),
            major: window.sessionStorage.getItem("major"),
            Audited_Person: window.sessionStorage.getItem("yishenhe"),
            Be_audited_Person: window.sessionStorage.getItem("shenhezhong"),
            audit_start_time:'2022.10.01',
            audit_over_time:'2022.10.02',
            Avg_com_score: '',
            Class_dis_status: "审核中",
            tableData: [{
                stu_num: '2013456',
                name: '王小虎',
                content: '2022-2023综合测评',
                zy_score: 80,
                dy_score: 70,
                ly_score: 50,
                my_score: 50,
                zc_score: 64,
                class_rank: 10,
                status: '审核中',
                sh_time: '2022.02.01'
            },
            ],
            paginations: {
                // 默认显示第几页
                currentPage: 1,
                // 个数选择器（可修改）
                pageSizes: [1, 2, 3, 4],
                // 默认每页显示的条数（可修改）
                PageSize: 4,
            },

        }
    },
    methods: {
      handleClick(row) {
        this.form = Object.assign({}, row);
        this.$axios.get(`http://localhost:/classDis/find/审核中&${this.form.stuNum}`).then(res => {
          if(res.status===200){
            // this.tableData=res.data
            this.forTheF();
            alert("状态变为审核中")
          }
        })
      },
      handleClick1(row) {
        this.form = Object.assign({}, row);
        this.$axios.get(`http://localhost:/classDis/find/已审核&${this.form.stuNum}`).then(res => {
          if(res.status===200){
            this.forTheF();
            alert("状态变为已审核")
            // this.tableData=res.data
          }
        })
      },


      // 每页显示多少条
      handleSizeChange(val) {
        // 改变每页显示的条数
        this.paginations.PageSize = val
        // 注意：在改变每页显示的条数时，要将页码显示到第一页
        this.paginations.currentPage = 1
        // console.log(`每页 ${val} 条`);
      },
      // 现在显示当前页的第几页
      handleCurrentChange(val) {
        // 改变默认的页数
        this.paginations.currentPage = val
        // console.log(`当前页: ${val}`);
      },
        filterHandler(value, row, column) {
            const property = column['property'];
            return row[property] === value;
        },
        forTheF(){
        this.$axios.get(`http://localhost:/classDis/select`).then(res => {
          if(res.status===200){
            this.tableData=res.data
          }
        })
        let zcSum = 0
        for(let item=0;item<this.tableData.length;item++){
          zcSum = zcSum + Number(this.tableData[item].zc_score)
          // console.log(this.tableData[item].zc_score)
        }
        this.Avg_com_score = zcSum/this.tableData.length
      },
      zhaoRen(){
        this.$axios.post(`http://localhost:/classDis/getN/审核中`).then(res => {
          // console.log(res.data);
          // this.yData2.push(res.data);
          window.sessionStorage.setItem("shenhezhong",res.data)
        }),
          this.$axios.post(`http://localhost:/classDis/getN/已审核`).then(res => {
            // console.log(res.data);
            // this.yData2.push(res.data);
            window.sessionStorage.setItem("yishenhe",res.data)
          })
      }
    },


    // 获取数据的接口
    mounted(){
      this.forTheF();
      this.zhaoRen();
    },
}
</script>
<style scoped>
/* .demo .el-descriptions .el-descriptions__body .el-descriptions__table .el-descriptions-row td{
        width: 30% !important;
    } */
.left {
    float: left;
    /* margin-top: 40px; */
}

.right {
    /* top: 20%; */
    position: absolute;
    top: -10%;
    left: 113%;
    font-family: “Microsoft YaHei”;
    padding: 10px;
}

.shenhe {
    width: 180px;
    height: 50px;
    font-size: 14px;
    /* background-color: rgb(243, 234, 234); */
    text-align: center;
    line-height: 50px;
    margin-bottom: 4px;
    border: 2px solid #ccc;
    /* box-shadow: 5px 5px 5px #ccc; */
}

.form1 {
    top: 40px;
    width: 100%;
}

.select_first {
    width: 150px;
    height: 30px;
    border: 1px solid #ccc;
    outline: medium
}

.rank {
    display: inline-block;
    padding: 4px;
    font-size: 14px;
    margin-right: 3px;
    border-radius: 1px;
    background-color: skyblue;
}
</style>
